<template>
  <div>
    <!-- 每日行情 -->
    <div class="cdjg-class">
      <div class="cdjg-title">
        螺丝椒
        <img src="@/assets/government/digitalFarmland/arrow-bottom.png" />
      </div>
      <div class="cdjg-box-top fs18 fwb df aic jcsb">
        <div>日期：2025-01-15</div>
        <div class="df aic ">
          价格
          <div class="price-box df aic jcc">3.2</div>
          元/公斤
        </div>
        <div class="df aic ">
          涨
          <div class="price-box df aic jcc">0.2</div>
        </div>
      </div>
      <div class="fs18 fwb mt34 mr24" style="float: right;">
        2025-01 ~ 2025-02
      </div>
      <div id="cdjghqzs" style="width: 700px;height: 500px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.intinzwqk();
  },
  methods: {
    intinzwqk() {
      let myChart = this.$echarts.init(document.getElementById("cdjghqzs"));
      myChart.setOption({
        color: ["#1CC274", "#FE6A00", "#00F6FF", "#FFE400"],
        xAxis: {
          type: "category",
          data: [
            "01-01",
            "01-02",
            "01-03",
            "01-04",
            "01-05",
            "01-06",
            "01-07",
            "01-08",
            "01-09",
            "01-10",
          ],
          axisLabel: {
            color: "white",
            fontSize: 13, // 设置字体大小为 14px，可以根据需要调整
            fontWeight: "bold",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#15DBF5",
            },
          },
        },
        grid: {
          top: "13%",
          left: "2%",
          right: "4%",
          bottom: "8%",
          containLabel: true,
        },
        legend: {
          show: false,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "white",
            fontSize: 18, // 设置字体大小为 14px，可以根据需要调整
          },
          name: "价格(元)",
          nameTextStyle: {
            color: "white",
            fontSize: "18",
            fontWeight: "bold",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#15DBF5",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#15DBF5",
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        series: [
          {
            name: "价格",
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "#04CDF4",
                barBorderRadius: 0,
                label: {
                  show: true,
                  color: "white",
                  position: "top",
                  formatter: function(p) {
                    return p.value > 0 ? p.value : "";
                  },
                },
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#04CDF4",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },

            data: [103, 369, 292, 380, 259, 115, 178, 465, 629, 433, 285, 428],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cFFF44A {
  color: #fff44a;
}
.price-box {
  width: 60px;
  height: 46px;
  background: #041b8c;
  border-radius: 4px;
  border: 1px solid #00f6ff;
  color: #fff44a;
  font-size: 24px;
  margin: 0 9px;
}
.cdjg-box-top {
  width: 649px;
  height: 73px;
  background-image: url(".././../../../assets/government/PriceQuotes/4.png");
  margin-top: 70px;
  margin-left: 30px;
  padding: 0 25px;
}
.cdjg-class {
  overflow: hidden;
  margin-top: 10px;
  width: 712px;
  height: 627px;
  background-image: url(".././../../../assets/government/PriceQuotes/3.png");
  .cdjg-title {
    width: 115px;
    height: 30px;
    background: linear-gradient(0deg, #0072ff 0%);
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    float: right;
    margin-right: 20px;
    margin-top: 4px;
  }
}
</style>
